<!-- 导航条 -->
<template>
	<view class="dad">
		<view class="son" v-for="(item, index) in goodsGroup" :key="index" @click="onItemClick(index)"
			:class="{ 'selected': currentGroupNum === index }">
			<text>{{ item }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			goodsGroup: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				currentGroupNum: 0
			}
		},
		methods: {
			onItemClick(index) {
				this.currentGroupNum = index;
				this.$emit('change', index);
			}
		}
	}
</script>

<style scoped>
	.dad {
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		justify-content: center;
		/* 水平居中 */
		align-items: flex-start;
		/* 垂直对齐到顶部 */
		padding: 0 8rpx;
		/* 设置内边距 */
		margin: 15rpx 0;
	}

	.son {
		display: inline-block;
		padding: 8rpx;
		margin: 0 8rpx;
		/* 设置左右边距 */
		position: relative;
		box-sizing: border-box;
	}

	/* 移除最后一个son元素的右边距 */
	.son:last-child {
		margin-right: 0;
	}

	.son.selected::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 4rpx;
		background-color: #a9161f;
	}
</style>